<template>
  <div class="hello">
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="title"
        label="书名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="author"
        label="作者">
      </el-table-column>
      <el-table-column
        prop="copies"
        label="版次">
      </el-table-column>
      <el-table-column
        label="删除">
        <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
      </el-table-column>
    </el-table>


<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="ID" prop="id">
    <el-input v-model="ruleForm.id"></el-input>
  </el-form-item>
    <el-form-item label="书名" prop="title">
    <el-input v-model="ruleForm.title"></el-input>
  </el-form-item>
    <el-form-item label="作者" prop="author">
    <el-input v-model="ruleForm.author"></el-input>
  </el-form-item>
    <el-form-item label="版次" prop="copies">
    <el-input v-model="ruleForm.copies"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
  </el-form-item>
</el-form>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
        return {
          ruleForm: {
          id: '',
          title: '',
          author: '',
          copies: ''
        },
          tableData: [{
            id: '1',
            title: 'Python编程',
            author: 'John Doe',
            copies:'4'
          }, {
            id: '2',
            title: '历史的秘密',
            author: 'Jane Smith',
            copies:'3'
          }, {
            id: '3',
            title: '宇宙探索',
            author: 'Emily Brown',
            copies:'2'
          },
          {
            id: '4',
            title: '健康生活',
            author: 'Mike Johnson',
            copies:'5'
          },
          {
            id: '5',
            title: '数学之美',
            author: 'Sarah Lee',
            copies:'4'
          },]
        }
      },
    methods: {
      handleDelete(index, row) {
        this.tableData.splice(index,1)
    },
      submitForm(ruleForm) {
        this.tableData.push(this.ruleForm)
      }}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
